<template>
  <div class="dashboard-container">
    <div class="statistics-content">
      <div class="d-flex box">
        <svg aria-hidden="true" class="svg-icon">
          <use xlink:href="#icon-uv"></use>
        </svg>
        <div class="ms-3">
          <div class="align-items-center d-flex">
            <h3>
              <i v-if="!vis_count" class="el-icon-loading"></i>
              <animated-number
                v-else
                :value="vis_count||0"
                :formatValue="formatCount"/>
            </h3>
            <span class="d-block ms-2 "> 月访客</span>
          </div>
          <p>今日：
            <animated-number
              :value="today_vis_count||0"
              :formatValue="formatCount"/>
          </p>
        </div>
      </div>
      <div class="d-flex box">
        <svg aria-hidden="true" class="svg-icon">
          <use xlink:href="#icon-login"></use>
        </svg>
        <div class="ms-3">
          <div class="align-items-center d-flex">
            <h3>
              <i v-if="!loginAllCount" class="el-icon-loading"></i>
              <animated-number
                v-else
                :value="loginAllCount||0"
                :formatValue="formatCount"/>
            </h3>
            <span class="d-block ms-2 "> 登录人数</span>
          </div>
          <p>
            今日：
            <animated-number
              :value="loginTodayCount||0"
              :formatValue="formatCount"/>
          </p>
        </div>
      </div>
      <div class="d-flex box">
        <svg aria-hidden="true" class="svg-icon">
          <use xlink:href="#icon-video"></use>
        </svg>
        <div class="ms-3">
          <div class="align-items-center d-flex">
            <h3>
              <i v-if="!vis_count" class="el-icon-loading"></i>
              <animated-number
                v-else
                value="109"
                :formatValue="formatCount"/>
            </h3>
            <span class="d-block ms-2 ">播放量</span>
          </div>
          <p>今日：
            <animated-number
              value="20"
              :formatValue="formatCount"/>
          </p>
        </div>
      </div>
      <div class="d-flex box">
        <svg aria-hidden="true" class="svg-icon">
          <use xlink:href="#icon-courser2"></use>
        </svg>
        <div class="ms-3">
          <div class="align-items-center d-flex">
            <h3>
              <i v-if="!vis_count" class="el-icon-loading"></i>
              <animated-number
                v-else
                :value="data.allCourseCount"
                :formatValue="formatCount"/>
            </h3>
            <span class="d-block ms-2 "> 课程数</span>
          </div>
          <p>今日：
            <animated-number
              :value="data.todayCourseCount"
              :formatValue="formatCount"/>
          </p>
        </div>
      </div>


    </div>

    <div class="table-list" id="IndexPreview">
      <div class="overview-card-title-container">
        <label class="overview-card-title">今日流量</label></div>
      <table class="list" id="IndexPreviewTableList">
        <tbody>
        <tr class="title">
          <th></th>
          <th>浏览量(PV)</th>
          <th>访客数(UV)</th>
          <th>IP数</th>
          <th>跳出率</th>
          <th>平均访问时长</th>
          <th>转化次数</th>
          <th class="empty-tr0"></th>
        </tr>
        <tr class="highlight">
          <td class="normal">今日</td>
          <td class="">{{new_timeTrendRpt[0] || 0}}</td>
          <td class="">{{new_timeTrendRpt[1] || 0}}</td>
          <td class="">{{new_timeTrendRpt[2] || 0}}</td>
          <td class="">{{new_timeTrendRpt[3] || 0}}%</td>
          <td class="">{{new_timeTrendRpt[4] | formatTime}}</td>
          <td class="">--</td>
          <td class="empty-tr0"></td>
        </tr>
        <tr>
          <td class="normal">昨日</td>
          <td class="">{{old_timeTrendRpt[0] || 0}}</td>
          <td class="">{{old_timeTrendRpt[1] || 0}}</td>
          <td class="">{{old_timeTrendRpt[2] || 0}}</td>
          <td class="">{{old_timeTrendRpt[3] || 0}}%</td>
          <td class="">{{old_timeTrendRpt[4] | formatTime}}</td>
          <td class="">--</td>
          <td class="empty-tr0"></td>
        </tr>
        <tr>
          <td class="normal">预计今日</td>
          <td class="arrow-down">171</td>
          <td class="">6</td>
          <td class="">6</td>
          <td class="">--</td>
          <td class="">--</td>
          <td class="">--</td>
          <td class="empty-tr0"></td>
        </tr>
        <tr class="empty-tr1"></tr>

        <tr class="fade toggleable-hidden empty-tr3">
          <td colspan="9"></td>
        </tr>
        </tbody>
      </table>
    </div>
    <a href="https://gitee.com/zsrey" target="_blank">
      <div style="margin: 70px auto;width: 700px">
        <img style="width: 700px"
             :src="img_home">
      </div>
    </a>
  </div>
</template>
<script>
  import img_home from '@/assets/home.png'
  import AnimatedNumber from "animated-number-vue";

  export default {
    name: 'dashboard',
    data() {
      return {
        img_home,
        data: {},
      }
    }, components: {
      AnimatedNumber
    },
    filters: {
      formatTime: function (value) {
        return value !== '--' ? formatSeconds(value) : '00:00'
      }
    },
    computed: {
      vis_count() {
        return this.data.commonTrackRpt ? this.data.commonTrackRpt.result.visitType.newVisitor.visitor_count + this.data.commonTrackRpt.result.visitType.oldVisitor.visitor_count : ''
      },
      today_vis_count() {
        return this.data.timeTrendRpt ? this.data.timeTrendRpt.result.items[1][1][1] : ''
      },
      loginAllCount() {
        return this.data.loginAllCount ? this.data.loginAllCount : ''
      },
      loginTodayCount() {
        return this.data.loginTodayCount ? this.data.loginTodayCount : ''
      },
      old_timeTrendRpt() {
        return this.data.timeTrendRpt ? this.data.timeTrendRpt.result.items[1][0] : []
      },
      new_timeTrendRpt() {
        return this.data.timeTrendRpt ? this.data.timeTrendRpt.result.items[1][1] : []
      }
    },
    created() {
      this.getInit()
    }, methods: {
      getInit() {
        this.api({
          url: `/statistics/showStatistics`,
          method: "get"
        }).then(data => {
          console.log(data)
          this.data = data
        })
      },
      formatCount(v) {
        return v.toFixed(0)
      }
    }
  }

  function formatSeconds(value) {
    let theTime = parseInt(value);// 秒
    let theTime1 = 0;// 分
    let theTime2 = 0;// 小时
    if (theTime > 60) {
      theTime1 = parseInt(theTime / 60);
      theTime = parseInt(theTime % 60);
      if (theTime1 > 60) {
        theTime2 = parseInt(theTime1 / 60);
        theTime1 = parseInt(theTime1 % 60);
      }
    }

    let result = "" + parseInt(theTime);//秒
    if (10 > theTime > 0) {
      result = "0" + parseInt(theTime);//秒
    } else {
      result = "" + parseInt(theTime);//秒
    }

    if (10 > theTime1 > 0) {
      result = "0" + parseInt(theTime1) + ":" + result;//分，不足两位数，首位补充0，
    } else {
      result = "" + parseInt(theTime1) + ":" + result;//分
    }
    if (theTime2 > 0) {
      result = "" + parseInt(theTime2) + ":" + result;//时
    }
    return result;
  }
</script>
<style scoped>
  div.table-list {
    max-width: 1200px;
    padding-top: 6px;
    padding-right: 1px;
    border: 1px solid #dedede;
    border-bottom: 0;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin: 53px auto;
    border-radius: 20px;
  }

  .overview-card-title-container {
    padding: 14px 15px 0;
  }

  div.table-list table.list {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
  }

  div.table-list table.list tr.title {
    border-bottom: none;
    height: 50px;
    line-height: 50px;
  }

  div.table-list table.list th {
    height: 16px;
    line-height: 16px;
    padding: 13px 20px 0 10px;
    text-align: right;
    color: #5b5d61;
    white-space: nowrap;
    font-weight: 400;
  }

  div.table-list table.list tr.highlight td {
    color: #111314;
    font-size: 16px;
    font-weight: bolder;
  }

  div.table-list table.list tr td {
    border-left: 1px solid #f0f0f0;
    padding: 6px 20px 6px 5px;
    height: 17px;
    line-height: 17px;
    white-space: nowrap;
    text-align: right;
  }

  .statistics-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .p-no-warp {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .align-items-center {
    height: 33px;
    align-items: center !important;
  }

  .d-flex {
    display: flex !important
  }

  h3 {
    font-size: calc(1.3rem + .6vw);
  }

  .ms-2 {
    margin-left: 0.5rem !important;
  }

  .d-block {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .box {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    width: 240px;
    margin: 30px 0 0 10px;
    padding: 15px;
    border-radius: 12px;
    background: #fff;
  }

  .box .svg-icon {
    margin-right: 12px;
    width: 42px;
    height: 80px;
  }
</style>
